<template>
  <el-row>
    <el-col :span="24">
      <el-card>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item style="float: right;">
            <el-input v-model="condition.username" placeholder="请输入要搜索的名称" @input="selectByPage(1);"/>
          </el-form-item>
        </el-form>
        <el-table :data="pageInfo.list" border style="width: 100%">
          <el-table-column prop="id" label="ID" width="50px" />
          <el-table-column prop="username" label="用户名" />
          <el-table-column prop="phone" label="电话" />
          <el-table-column prop="email" label="邮箱" />
          <el-table-column prop="realname" label="真实姓名" />
          <el-table-column prop="money" label="余额" />
          <el-table-column prop="regTime" label="注册时间"/>
          <el-table-column label="账号状态" >
          <template #default="scope">
              <el-tag type="info"  v-if="scope.row.status==0">未认证</el-tag>
              <el-tag type="success" v-else-if="scope.row.status==1">已认证</el-tag>
              <el-tag type="danger" v-else-if="scope.row.status==2">禁用</el-tag>
          </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" @click="resetPwd(scope.row.id)">重置密码</el-button>
              <el-button type="info" @click="updateShow(scope.row.id,scope.row.status)">设置</el-button>
            </template>

          </el-table-column>
        </el-table>
        <el-row class="row-bg" justify="center" style="margin-top: 20px;">
          <el-pagination background layout="prev, pager, next"
                         v-model:current-page="pageInfo.pageNum"
                         :page-count="pageInfo.pages"
                         @update:current-page="selectByPage" />
        </el-row>
      </el-card>
    </el-col>
  </el-row>
  <!-- 添加模态框开始 -->
  <el-dialog v-model="addDialogShow" title="状态设置" width="500px">
    <div>
      <el-radio-group v-model="user.status">
        <el-radio :value="0" size="large" border>未认证</el-radio>
        <el-radio :value="1" size="large" border>已认证</el-radio>
        <el-radio :value="2" size="large" border>禁用</el-radio>
      </el-radio-group>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialogShow.value=false">取消</el-button>
        <el-button type="primary" @click="updateStatus()"> 确认</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 添加模态框结束 -->
</template>
<script setup>
import {ref} from "vue";
import {useTokenStore} from "@/stores/token.js";
import userApi from "@/api/userApi.js";
import {ElMessage} from "element-plus";
const  tokenStore=useTokenStore();
const SERVER_ADDR=ref(import.meta.env.VITE_SERVER_ADDR);
const user=ref({
  status:'',
  id:'',
})
const addDialogShow=ref(false);
const  condition= ref({
  username:null,
});

//分页信息
const pageInfo=ref({
  pages:0,
  pageSize:0,
  pageNum:0
});
//中转设置
function updateShow(id,status){
  user.value.id=id;
  user.value.status=status;
  addDialogShow.value=true;
}
//修改状态 未认证-认证-禁用
function updateStatus(){
  userApi.updateStatus(user.value)
      .then(resp=>{
        if(resp.code==10000){
          ElMessage.success(resp.msg)
          selectByPage(1);
          addDialogShow.value=false;
        }else {
          ElMessage.error("设置失败")
        }
      })
}





//重置密码
function resetPwd(id){
userApi.resetPwd(id)
    .then(resp=>{
      if(resp.code==10000){
        ElMessage.success(resp.msg)
      }else{
        ElMessage.error("重置失败")
      }
    })
}

//分页查询
function selectByPage(pageNum){
  userApi.selectByPage(condition.value,pageNum,10)
      .then(resp => {
        if(resp.code==10000){
          pageInfo.value=resp.data
        }else {
          ElMessage.success(resp.msg);
        }
      })
}

selectByPage();
</script>
<style scoped>

</style>